import {
  createFileRoute,
  Outlet,
  useMatchRoute,
  useRouterState,
} from "@tanstack/react-router";
import { allHandbooks } from "content-collections";
import { useMemo, useRef, useState } from "react";

import { Footer } from "@/components/footer";
import { Header } from "@/components/header";
import { SidebarNavigation } from "@/components/sidebar-navigation";
import { DocsDrawerContext } from "@/hooks/use-docs-drawer";
import { HandbookDrawerContext } from "@/hooks/use-handbook-drawer";
import { HeroContext } from "@/hooks/use-hero-context";

import { handbookStructure } from "./company-handbook/-structure";
import { getDocsBySection } from "./docs/-structure";

export const Route = createFileRoute("/_view")({
  component: Component,
});

function Component() {
  const router = useRouterState();
  const isDocsPage = router.location.pathname.startsWith("/docs");
  const isHandbookPage =
    router.location.pathname.startsWith("/company-handbook");
  const [onTrigger, setOnTrigger] = useState<(() => void) | null>(null);
  const [isDocsDrawerOpen, setIsDocsDrawerOpen] = useState(false);
  const [isHandbookDrawerOpen, setIsHandbookDrawerOpen] = useState(false);

  return (
    <HeroContext.Provider
      value={{
        onTrigger,
        setOnTrigger: (callback) => setOnTrigger(() => callback),
      }}
    >
      <DocsDrawerContext.Provider
        value={{ isOpen: isDocsDrawerOpen, setIsOpen: setIsDocsDrawerOpen }}
      >
        <HandbookDrawerContext.Provider
          value={{
            isOpen: isHandbookDrawerOpen,
            setIsOpen: setIsHandbookDrawerOpen,
          }}
        >
          <div className="min-h-screen flex flex-col">
            <Header />
            <main className="flex-1">
              <Outlet />
            </main>
            <Footer />
            {isDocsPage && (
              <MobileDocsDrawer
                isOpen={isDocsDrawerOpen}
                onClose={() => setIsDocsDrawerOpen(false)}
              />
            )}
            {isHandbookPage && (
              <MobileHandbookDrawer
                isOpen={isHandbookDrawerOpen}
                onClose={() => setIsHandbookDrawerOpen(false)}
              />
            )}
          </div>
        </HandbookDrawerContext.Provider>
      </DocsDrawerContext.Provider>
    </HeroContext.Provider>
  );
}

function MobileDocsDrawer({
  isOpen,
  onClose,
}: {
  isOpen: boolean;
  onClose: () => void;
}) {
  const matchRoute = useMatchRoute();
  const match = matchRoute({ to: "/docs/$", fuzzy: true });

  const currentSlug = (
    match && typeof match !== "boolean" ? match._splat : undefined
  ) as string | undefined;

  const { sections } = getDocsBySection();
  const scrollContainerRef = useRef<HTMLDivElement>(null);

  return (
    <>
      {isOpen && (
        <div
          className="fixed inset-0 top-[69px] z-40 md:hidden"
          onClick={onClose}
        />
      )}
      <div
        className={`fixed top-[69px] left-0 h-[calc(100vh-69px)] w-72 bg-white/80 backdrop-blur-sm border-r border-neutral-100 shadow-2xl shadow-neutral-900/20 z-50 md:hidden transition-transform duration-300 ease-in-out ${
          isOpen ? "translate-x-0" : "-translate-x-full"
        }`}
        style={{
          paddingLeft: "env(safe-area-inset-left)",
        }}
      >
        <div
          ref={scrollContainerRef}
          className="h-full overflow-y-auto scrollbar-hide p-4"
        >
          <SidebarNavigation
            sections={sections}
            currentSlug={currentSlug}
            onLinkClick={onClose}
            scrollContainerRef={scrollContainerRef}
            linkTo="/docs/$"
          />
        </div>
      </div>
    </>
  );
}

function MobileHandbookDrawer({
  isOpen,
  onClose,
}: {
  isOpen: boolean;
  onClose: () => void;
}) {
  const matchRoute = useMatchRoute();
  const match = matchRoute({ to: "/company-handbook/$", fuzzy: true });

  const currentSlug = (
    match && typeof match !== "boolean" ? match._splat : undefined
  ) as string | undefined;

  const handbooksBySection = useMemo(() => {
    const sectionGroups: Record<
      string,
      { title: string; docs: (typeof allHandbooks)[0][] }
    > = {};

    allHandbooks.forEach((doc) => {
      if (doc.slug === "index" || doc.isIndex) {
        return;
      }

      const sectionName = doc.section;

      if (!sectionGroups[sectionName]) {
        sectionGroups[sectionName] = {
          title: sectionName,
          docs: [],
        };
      }

      sectionGroups[sectionName].docs.push(doc);
    });

    Object.keys(sectionGroups).forEach((sectionName) => {
      sectionGroups[sectionName].docs.sort((a, b) => a.order - b.order);
    });

    const sections = handbookStructure.sections
      .map((sectionId) => {
        const sectionName =
          sectionId.charAt(0).toUpperCase() + sectionId.slice(1);
        return sectionGroups[sectionName];
      })
      .filter(Boolean);

    return { sections };
  }, []);

  const scrollContainerRef = useRef<HTMLDivElement>(null);

  return (
    <>
      {isOpen && (
        <div
          className="fixed inset-0 top-[69px] z-40 md:hidden"
          onClick={onClose}
        />
      )}
      <div
        className={`fixed top-[69px] left-0 h-[calc(100vh-69px)] w-72 bg-white/80 backdrop-blur-sm border-r border-neutral-100 shadow-2xl shadow-neutral-900/20 z-50 md:hidden transition-transform duration-300 ease-in-out ${
          isOpen ? "translate-x-0" : "-translate-x-full"
        }`}
        style={{
          paddingLeft: "env(safe-area-inset-left)",
        }}
      >
        <div
          ref={scrollContainerRef}
          className="h-full overflow-y-auto scrollbar-hide p-4"
        >
          <SidebarNavigation
            sections={handbooksBySection.sections}
            currentSlug={currentSlug}
            onLinkClick={onClose}
            scrollContainerRef={scrollContainerRef}
            linkTo="/company-handbook/$"
          />
        </div>
      </div>
    </>
  );
}
